import React, { useState } from 'react';
import s from './chart2.module.css';
import echarts from 'echarts';
import cn from 'classnames';
import { WARNING_SECURITYEVENT_MAP2 as MAP2 } from '@/common/common.js';
import EmptyData from '@/components/EmptyData';
let maxNum = 0;
const colorArr = {
  可用性: '#f6bd16',
  漏洞: '#6adfaf',
  安全事件: '#0b6fd6',
  风险外链: '#65789b',
  篡改: '#7DA9FC',
};
const option = {
  tooltip: {
    trigger: 'item',
    formatter({ name, percent, value }) {
      return `<div style="display:flex;padding:0.5rem">
      <div style="color: #2B2C32;padding-right: 0.25rem">${name}:</div>
      <div style="color: #2B2C32;padding-right: 0.25rem">${value}</div>
      <div style="color: #2B2C32">(${percent}%)</div>
    </div>`;
    },
    backgroundColor: '#f1f1f1',
    textStyle: {
      color: '#9f9fa1',
      fontSize: 12,
    },
  },

  title: {
    x: 'center',
    y: 'center',
    textStyle: {
      color: '#2B2C32',
      fontSize: 16,
    },
  },
  grid: {
    top: '20%'
  },
  series: [
    {
      data: [
        { name: '可用性', value: 39 },
        { name: '漏洞', value: 11 },
        { name: '安全事件', value: 11 },
        { name: '风险外链', value: 11 },
      ],
      center: ['50%', '50%'],
      type: 'pie',
      radius: '70%',
      avoidLabelOverlap: false,
      hoverOffset: 5,
      label: {
        show: false,
      },
      itemStyle: {
        color: function ({ name }) {
          return colorArr[name];
        },
      },
    },
  ],
};
export default function chart2({ data = {} }) {
  const [severity, setSeverity] = useState([]);
  const chart2SpanColor = (info) => {
    return (
      <>
        {info.map((e, i) => {
          return (
            <p key={i} className={s.charp}>
              <span
                className={s.legendC}
                style={{ 'background-color': e.color }}
              ></span>
              <span className={s.name}>{e.name}</span>&nbsp;
              <span className={s.score} title={e.value}>{e.value}</span>
            </p>
          );
        })}
      </>
    );
  };
  React.useEffect(() => {
    if (!data.proportion) {
      return false;
    }
    const chart2_1 = echarts.init(document.getElementById('chart2_1'));
    const severity_ = Object.entries(data.proportion).map(([type, val]) => {
      return { name: MAP2[type], value: val, color: colorArr[MAP2[type]] };
    }).sort((a,b) => a.name?.length - b.name?.length)
    setSeverity(severity_);
    option.series[0].data = severity_;
    chart2_1.setOption(option, true);
    chart2_1.resize();
  }, [data]);
  return (
    <div className={s.chart2}>
      <div className={s.chart2_1}>
        <div className={s.title}>今日告警监测项占比</div>
        <div id="chart2_1" style={{ width: '15rem', height: '12rem', 'margin-top': '2rem' }}></div>
        <div className={s.legendBox}>{chart2SpanColor(severity)}</div>
      </div>
      <div className={s.chart2_2}>
        <div className={s.title2_2}>
          <span>今日告警TOP榜</span>
          <span>次数</span>
        </div>

        {data.top[0] ? (
          data.top.map((e, i) => {
            if (i === 0) {
              maxNum = e.count;
            }
            return (
              <div className={s.li2_2} key={i}>
                <p className={s.df}>
                  {i + 1}.
                  <a className={cn(s.li2_2_2, 'main-color')} href={`/#/dashboard?id=${e.target_id}`} target='_blank' rel="noreferrer">
                    {e.target_url || '--'}
                  </a>
                </p>
                <p className={s.li2_2_1}>
                  <span>{e.target_name ? e.target_name : e.target_title || '--'}</span>
                  <span>{e.count}</span>
                </p>
                <p className={s.li2_2_3}>
                  <span className={s.li_sp1}></span>
                  <span
                    className={s.li_sp2}
                    style={{ width: `${(e.count / maxNum) * 100}%` }}
                  ></span>
                </p>
              </div>
            );
          })
        ) : (
          <EmptyData />
        )}
      </div>
    </div>
  );
}
